<template>
  <div class="statistics-report">
    <SearchForm
      v-model="searchParams"
      hideStudent
      @search="handleSearch"
      @reset="handleReset"
    />

    <!-- 统计报表内容 -->
    <el-card class="report-card">
      <!-- 总体统计标题 -->
      <div class="report-header">
        <h2 class="report-title">
          联合培养工程硕博士累计<span class="highlight-number">{{
            totalCount
          }}</span
          >名
        </h2>
        <p class="report-subtitle">
          其中在校学习<span class="highlight-number">{{
            statusCount.inSchool
          }}</span
          >人， 在企实践<span class="highlight-number">{{
            statusCount.inEnterprise
          }}</span
          >人， 已毕业<span class="highlight-number">{{
            statusCount.graduated
          }}</span
          >人
        </p>
      </div>

      <!-- 动态生成统计卡片 -->
      <div class="statistics-cards">
        <div
          v-for="(item, index) in trainTypeStats"
          :key="item.trainType"
          class="stat-card"
          :class="getCardClass(item.trainType, index)"
        >
          <div class="card-header">
            <h3>
              {{ getTrainTypeName(item.trainType) }}：<span class="count">{{
                item.studentCount
              }}</span
              >名
            </h3>
          </div>
          <div class="card-content">
            <div class="stat-item">
              <span class="label">在校学习：</span>
              <span class="value">{{ item.inSchoolCount }}名</span>
            </div>
            <div class="stat-item">
              <span class="label">在企实践：</span>
              <span class="value">{{ item.inEnterpriseCount }}名</span>
            </div>
            <div class="stat-item">
              <span class="label">已毕业：</span>
              <span class="value">{{ item.graduatedCount }}名</span>
            </div>
            <!-- 留企统计单独框框 -->
            <!-- 企业在职博士不展示这个框框 -->
            <div
              class="stay-enterprise-section"
              v-if="item.trainType !== 'on-the-job_doctor'"
            >
              <div class="stay-enterprise-item">
                <span class="label">毕业人员中留企：</span>
                <span class="value">{{ item.graduateStayCount }}名</span>
              </div>
              <div class="stay-enterprise-item">
                <span class="label">未毕业人员中意向留企：</span>
                <span class="value">{{ item.ungraduateStayCount }}名</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import SearchForm from "./searchForm.vue";
import {
  getTotalStudentCount,
  getStudentStatusCount,
  getTrainTypeStatistics,
} from "@/api/statistics";
import { ElMessage } from "element-plus";

// 搜索参数
const searchParams = ref({});

// 统计数据
const totalCount = ref(0);
const statusCount = ref({
  inSchool: 0,
  inEnterprise: 0,
  graduated: 0,
  stayInEnterprise: 0,
});

const trainTypeStats = ref([]);

// 计算未毕业人员意向留企总数
const totalIntendedStay = computed(() => {
  return trainTypeStats.value.reduce((sum, item) => {
    return sum + (item.intendedStayCount || 0);
  }, 0);
});

// 加载统计数据
const loadStatistics = async () => {
  try {
    // 获取总人数
    const totalRes = await getTotalStudentCount(searchParams.value);
    if (totalRes.code === 200) {
      totalCount.value = totalRes.data || 0;
    }

    // 获取状态统计
    const statusRes = await getStudentStatusCount(searchParams.value);
    if (statusRes.code === 200) {
      statusCount.value = {
        inSchool: statusRes.data?.inSchoolCount || 0,
        inEnterprise: statusRes.data?.inEnterpriseCount || 0,
        graduated: statusRes.data?.graduatedCount || 0,
        stayInEnterprise: statusRes.data?.graduateStayCount || 0,
      };
    }

    // 获取培养类型统计
    const trainRes = await getTrainTypeStatistics(searchParams.value);
    if (trainRes.code === 200) {
      trainTypeStats.value = trainRes.data || [];
      trainTypeStats.value.sort((a, b) => {
        if (a.trainType === 'full-time_masters_degree') {
          return -1
        }
        return 1
      })
    }
  } catch (error) {
    console.error("加载统计数据失败:", error);
    ElMessage.error("加载统计数据失败，请重试");
  }
};

// 搜索处理
const handleSearch = () => {
  console.log("搜索参数:", searchParams.value);
  loadStatistics();
};

// 重置处理
const handleReset = () => {
  console.log("重置搜索");
  loadStatistics();
};

// 获取培养类型中文名称
const getTrainTypeName = (trainType) => {
  const typeMap = {
    "full-time_masters_degree": "全日制硕士",
    "full-time_doctor": "全日制博士",
    "on-the-job_doctor": "企业在职博士",
    "part-time_masters_degree": "企业在职硕士",
  };
  return typeMap[trainType] || trainType;
};

// 获取卡片样式类名
const getCardClass = (trainType, index) => {
  const classMap = {
    "full-time_masters_degree": "full-time-master",
    "full-time_doctor": "full-time-doctor",
    "on-the-job_doctor": "part-time-doctor",
    "part-time_masters_degree": "part-time-master",
  };
  return classMap[trainType] || `card-${index}`;
};

// 组件挂载时加载数据
onMounted(() => {
  //   loadStatistics()
});
</script>

<style scoped>
.statistics-report {
  padding: 20px;
}

.report-card {
  margin-top: 20px;
}

.report-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px 0;
}

.report-title {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
}

.report-subtitle {
  font-size: 16px;
  color: #606266;
  margin: 0;
}

.highlight-number {
  color: #409eff;
  font-weight: bold;
  font-size: 1.2em;
}

.statistics-cards {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.stat-card {
  flex: 1;
  border: 2px solid;
  border-radius: 8px;
  padding: 20px;
  min-height: 280px;
}

.full-time-master {
  border-color: #87ceeb;
  background-color: #f0f8ff;
}

.full-time-doctor {
  border-color: #ffa07a;
  background-color: #fff5ee;
}

.part-time-doctor {
  border-color: #98fb98;
  background-color: #f0fff0;
}

.part-time-master {
  border-color: #dda0dd;
  background-color: #f8f0ff;
}

.card-0,
.card-1,
.card-2,
.card-3 {
  border-color: #e0e0e0;
  background-color: #fafafa;
}

.card-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.count {
  color: #409eff;
  font-size: 1.3em;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f7fa;
}

.stat-item:last-child {
  border-bottom: none;
}

/* 留企统计单独框框样式 - 根据外层卡片色调调整 */
.stay-enterprise-section {
  margin-top: 15px;
  padding: 15px;
  border: 2px solid;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stay-enterprise-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid;
}

.stay-enterprise-item:last-child {
  border-bottom: none;
}

.stay-enterprise-item .label {
  font-size: 14px;
  font-weight: 600;
}

.stay-enterprise-item .value {
  font-size: 16px;
  font-weight: bold;
}

/* 全日制硕士 - 天蓝色主题 */
.full-time-master .stay-enterprise-section {
  border-color: #87ceeb;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
}

.full-time-master .stay-enterprise-item {
  border-bottom-color: #b3d9ff;
}

.full-time-master .stay-enterprise-item .label,
.full-time-master .stay-enterprise-item .value {
  color: #4682b4;
}

/* 全日制博士 - 橙色主题 */
.full-time-doctor .stay-enterprise-section {
  border-color: #ffa07a;
  background: linear-gradient(135deg, #fff5ee 0%, #ffe4e1 100%);
}

.full-time-doctor .stay-enterprise-item {
  border-bottom-color: #ffcc99;
}

.full-time-doctor .stay-enterprise-item .label,
.full-time-doctor .stay-enterprise-item .value {
  color: #cd853f;
}

/* 企业在职博士 - 绿色主题 */
.part-time-doctor .stay-enterprise-section {
  border-color: #98fb98;
  background: linear-gradient(135deg, #f0fff0 0%, #e6ffe6 100%);
}

.part-time-doctor .stay-enterprise-item {
  border-bottom-color: #b3ffb3;
}

.part-time-doctor .stay-enterprise-item .label,
.part-time-doctor .stay-enterprise-item .value {
  color: #32cd32;
}

/* 企业在职硕士 - 紫色主题 */
.part-time-master .stay-enterprise-section {
  border-color: #dda0dd;
  background: linear-gradient(135deg, #f8f0ff 0%, #f0e6ff 100%);
}

.part-time-master .stay-enterprise-item {
  border-bottom-color: #e6b3ff;
}

.part-time-master .stay-enterprise-item .label,
.part-time-master .stay-enterprise-item .value {
  color: #9370db;
}

/* 默认卡片样式 */
.card-0 .stay-enterprise-section,
.card-1 .stay-enterprise-section,
.card-2 .stay-enterprise-section,
.card-3 .stay-enterprise-section {
  border-color: #e0e0e0;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
}

.card-0 .stay-enterprise-item,
.card-1 .stay-enterprise-item,
.card-2 .stay-enterprise-item,
.card-3 .stay-enterprise-item {
  border-bottom-color: #d0d0d0;
}

.card-0 .stay-enterprise-item .label,
.card-0 .stay-enterprise-item .value,
.card-1 .stay-enterprise-item .label,
.card-1 .stay-enterprise-item .value,
.card-2 .stay-enterprise-item .label,
.card-2 .stay-enterprise-item .value,
.card-3 .stay-enterprise-item .label,
.card-3 .stay-enterprise-item .value {
  color: #666666;
}

.label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.value {
  font-size: 16px;
  color: #303133;
  font-weight: bold;
}

/* 留企统计卡片 */
.stay-enterprise-card {
  margin-top: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
}

.stay-enterprise-stats {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.stay-stat-card {
  flex: 1;
  border: 2px solid;
  border-radius: 8px;
  padding: 20px;
  background-color: #ffffff;
}

.graduated-stay {
  border-color: #67c23a;
  background: linear-gradient(135deg, #f0f9ff 0%, #e8f8f5 100%);
}

.intended-stay {
  border-color: #e6a23c;
  background: linear-gradient(135deg, #fffbf0 0%, #fff7e6 100%);
}

.stay-card-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
}

.stay-card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.stay-card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stay-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.stay-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.total-item {
  margin-top: 8px;
  background-color: #f5f7fa;
  border: 2px solid #409eff;
}

.stay-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.stay-value {
  font-size: 18px;
  color: #409eff;
  font-weight: bold;
}

.total-item .stay-value {
  font-size: 20px;
  color: #f56c6c;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .statistics-cards {
    flex-direction: column;
  }

  .stat-card {
    min-height: auto;
  }

  .stay-enterprise-stats {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .statistics-report {
    padding: 10px;
  }

  .report-title {
    font-size: 20px;
  }

  .report-subtitle {
    font-size: 14px;
  }

  .stat-card {
    padding: 15px;
  }

  .stay-stat-card {
    padding: 15px;
  }

  .section-title {
    font-size: 18px;
  }
}
</style>
